<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="box">
                <div class="appTitle">
                    <h3>课程详情</h3>
                </div>
                <div class="lesson-list">
                    <div>
                        <label>所属学校：</label>
                        <div>{{lessonDetail.sSchoolName}}</div>
                    </div>
                    <div>
                        <label>课程标题：</label>
                        <div>{{lessonDetail.sTitle}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">课程图片：</label>
                        <div class="lesson-img-warpper" >
                            <img :src="lessonDetail.sPicture == ''?require('../../../assets/lessonManage.png'):lessonDetail.sPicture" :alt="lessonDetail.sPicture == ''?'课程默认图':'课程图片'">
                        </div>
                    </div>
                    <div>
                        <label>开课时间：</label>
                        <div>{{lessonDetail.sStartTime|fillterNull}}</div>
                    </div>
                    <div>
                        <label>预计结束时间：</label>
                        <div>{{lessonDetail.sExpectEndTime|fillterNull}}</div>
                    </div>
                    <div>
                        <label>所选摄像头：</label>
                        <div>{{lessonDetail.sAngleView|fillterNull}}</div>
                    </div>
                    <div>
                        <label>适合人群：</label>
                        <div>{{lessonDetail.sSuitPeople|fillterNull}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">课程概述与亮点：</label>
                        <div>{{lessonDetail.sHighlights|fillterNull}}</div>
                    </div>
                    <div>
                        <label>授课教师：</label>
                        <div>{{lessonDetail.sTeacherName|fillterNull}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">授课教师图片：</label>
                        <div class="lesson-header-img-wrapper" v-if="lessonDetail.sTeacherPicture != ''">
                            <img :src="lessonDetail.sTeacherPicture" alt="">
                        </div>
                        <span v-if="!lessonDetail.sTeacherPicture">--</span>
                    </div>
                     <div>
                        <label class="lesson-label">授课教师简介：</label>
                        <div>{{lessonDetail.sTeacherIntroduction|fillterNull}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">相关课件：</label>
                        <div v-if="lessonDetail.sCourseware !== ''" class="course-img-wrapper">
                            <img :src="lessonDetail.sCourseware | checkFileType" alt="">
                        </div>
                        <span class="lesson-icon">{{lessonDetail.sCoursewareName|fillterNull}}</span>
                    </div>
                     <div>
                        <label>分类标签：</label>
                        <div>{{lessonDetail.sTags|fillterNull}}</div>
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm('dataForm')">返回</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>



<script>
import Levelbar from '../../layout/Levelbar';
import { getLessonDetailByLessonId } from 'api/onlineLesson';
export default {
    name: 'lessonDetail',
    components: {Levelbar},
    data() {
        return {
            lessonId: '', // 课程ID
            lessonDetail: [] // 课程详情
        }
    },
    created() {
        this.lessonId = this.$route.params.lId;
        // 根据课程ID获取详情
        this.getLessonDetail();

    },
    methods: {
        getLessonDetail() {
            getLessonDetailByLessonId(this.lessonId).then(res => {
                // console.log('课程管理', res);
                this.lessonDetail = res.data.content;        
            }) 
        },
        // 返回上一页
        resetForm() {
            this.$router.go(-1);
        }         
    },
    filters: {
        checkFileType(fileUrl) {
            if (fileUrl) {
                let suffixName = fileUrl.substr(fileUrl.lastIndexOf('.'));
                var extReg = /\.(docx?|xlsx?|pptx?|pdf|txt)$/g; 
                var res = '';
                suffixName.replace(extReg, (a, b) => {
                    if (b) {
                        res = require(`../../../assets/${b}.png`);
                    } 
                });
                return res || require('../../../assets/other.png');
            }
           
        },
        fillterNull(val) {
            if (val) {
                return val
            } else {
                return '--'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;

     .content {
        padding: 0 50px;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background: #fff;
        .box {
        padding-bottom: 20px;
        background: #fff;
            .appTitle {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .lesson-list{
                margin-top: 25px;
                font-size: 14px;
                color:#333; 
                >div{
                    padding:15px 0;
                }
                label{
                    color: #666;
                    display:inline-block;
                    width: 120px;
                    text-align: right;
                }

                label+div{
                    display: inline-block;
                    max-width: calc(100% - 150px);
                    // border:red solid 1px;
                    word-wrap:break-word;
                }
                .lesson-label{
                    vertical-align: top;
                }
                .lesson-icon{
                    vertical-align: 15px;
                }
                .lesson-img-warpper{
                    width: 750px;
                    height: 300px;
                    img{
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
              
                .lesson-header-img-wrapper{
                    width: 100px;
                    height: 100px;
                    img{
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }

                .course-img-wrapper{
                    width:40px;
                    height: 40px;
                    img{
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            .footer {
                //float: right;
                text-align: center;
                margin-top: 60px;
                margin-bottom: 40px;
            }

        }
     }

}
</style>

